<template>
	<div class="page-content">
		<el-card class="box-card">
			<div v-for="video in videoList" class="video_item" :key="video.name">
				<video :src="video.url" controls width="300" height="260" >
					您的浏览器不支持 video 标签。
				</video>
				<p align="center">{{video.name}}</p>
			</div>
		</el-card>
	</div>
</template>
<script>
	import { mapGetters } from "vuex";
	import welBasic from "@/const/basic"
	import * as Driver from 'driver.js' // import driver.js
	import 'driver.js/dist/driver.min.css' // import driver.js css
	import steps from './defineSteps'
	export default {
		name:'wel',
		components:{},
		data(){
			return {
				videoList:[
					{name:'小猪佩奇',url:'/static/video/1521691445496a2c2bee323d9e.mp4_last.mp4'}
				],
				driver:null	
			}
		},
		computed:{
			...mapGetters(['menu'])
		},
		created(){
			// this.videoList = welBasic.videoList
		},
		mounted() {
		   	this.driver = new Driver();
		   	this.driver.defineSteps(steps)
      		this.driver.start()
		},

	}
</script>
<style>
	.page-content{
		height:100%;
		width: 100%;
	}
	.page-content .box-card{
	}
	.video_item{
		display: inline-block;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin:10px;
	}
</style>